// let h4 = document.querySelectorAll("h4");
// let main = document.querySelectorAll(".main");

// for (let i = 0; i < h4.length; i++) {
//   h4[i].addEventListener("mouseenter", function arrowH4() {
//     for (let j = 0; j < h4.length; j++) {
//       main[j].style = `height:0px; transition: 0s; z-index:0;`;
//     }
//     main[i].style = `height:200px;z-index:999;transition: 0s;`;
//   });
//   h4[i].addEventListener("mouseleave", function arrowH4() {
//     for (let j = 0; j < h4.length; j++) {
//         main[j].style = `height:0px; transition: 0s; z-index:0;`;
//       }
//       main[i].style = `height:0px;z-index:999;`;
//   });
// }


let tilteList=document.querySelectorAll(".tilteList>.nav");
let box=document.querySelector(".box")
let mianUl=document.querySelectorAll(".main");
// 保存当前左右切换分类的状态（决定是否有动画）
let flag=false;//一开始不是左右切换(默认值)
let lastIndex=0;//上一次操作的值，目的是为了清除上一次未完成动画的过渡效果。
// 给所有的标题列表第一个li绑定事件
tilteList.forEach(function(el,idx){
  // 鼠标移入事件
  el.addEventListener("mouseenter",function (){
    // 判断是否左右切换分类(如果是那么去除动画)
    let h=getComputedStyle(mianUl[lastIndex],"style").height;
    if(flag || (h!=="0px")){
      mianUl[idx].style.transition="none";
      // 清除上一次未完成的过渡效果
      mianUl[lastIndex].style.transition="none";
    };
    // 打开状态
    flag=true;
      // 给对应的分类设置行内样式高度
    mianUl[idx].style.height="150px";
    // 记录上一次的idx
    lastIndex=idx;
  })
  // 鼠标移出事件
  el.addEventListener("mouseleave",function (){
    // 给对应的分类设置行内样式高度
  mianUl[idx].style.height="0px";
  // 清除过渡动画
  mianUl[idx].style.transition="none";
})
})

// 给大盒子box设置鼠标移出事件
box.addEventListener("mouseleave",function(){
  // 恢复动画
  mianUl.forEach(function(el,index){
    el.style.transition="1s ease";
  });
  // 恢复关闭切换状态为flase
  flag=false;
})